<template>
  <div>
    <div class="page-header">
      <div class="box">
        <el-row class="left">
          <el-row class="title">
            <span></span>
            查看报备详情
          </el-row>
        </el-row>
        <el-row class="right">
          <el-button type="primary" @click="reloadPage">
            <span class="el-icon-refresh el-icon--left"></span>刷新
          </el-button>
          <el-button type="danger" @click="closePage">
            <span class="el-icon-close el-icon--left"></span>关闭
          </el-button>
        </el-row>
      </div>
    </div>
    <div class="page-content">
      <div class="info-box">
        <el-steps :active="1" finish-status="success" align-center>
          <el-step icon="el-icon-time" title="待平台审核" description="2019-07-26 15:04:00"></el-step>
          <el-step icon="el-icon-time" title="待平台上架"></el-step>
          <el-step icon="el-icon-time" title="平台已上架"></el-step>
          <el-step icon="el-icon-time" title="采购人已下单"></el-step>
        </el-steps>
      </div>
      <div class="table-box">
        <div class="table-title">
          <el-row>
            <span class="title">报备编号：19072600001</span>
            <span class="warning-text">
              <i class="el-icon-warning"></i> 报备状态：待上架
            </span>
          </el-row>
          <el-button type></el-button>
        </div>
        <div class="info-item base-info">
          <div class="thead">
            <el-row>
              <i class="el-icon-s-management el-icon--left"></i> 报备基础信息
            </el-row>
          </div>
          <div class="tbody">
            <div class="content">
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>报备人姓名：张小明
                </el-row>
                <el-row>
                  <span class="required-icon">*</span>点单平台：广东省采
                </el-row>
              </div>
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>报备人电话：12345678901
                </el-row>
                <el-row>
                  <span class="required-icon">*</span>项目报备时间：2019-07-24 至 2019-08-24
                </el-row>
              </div>
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>采购单位（全称）：东莞市万江街道办事处商务局
                </el-row>
                <el-row>
                  <span class="required-icon">*</span>收货人：张警官
                </el-row>
              </div>
              <div class="line-item">
                <el-row>
                  <span class="required-icon">*</span>收货地址：广东省 东莞市 某某区 某某街道
                </el-row>
              </div>
              <div class="line-item">
                <el-row>备注：采购人将于8月初进行下单，请妥了网工作人员尽快上架</el-row>
              </div>
            </div>
          </div>
        </div>
        <div class="info-item product-info">
          <div class="thead">
            <el-row>
              <i class="el-icon-s-management el-icon--left"></i> 报备商品信息
            </el-row>
            <el-row class="info">
              共报备
              <span class="warning-text">3</span>条商品，挂网价合计
              <span class="warning-text">25880.00</span>元
            </el-row>
          </div>
          <table-list :tableData="tableData" :load="loading" :isOperate="false" :editFunc="editBtn"></table-list>
        </div>
      </div>
    </div>

    <el-dialog
      class="dialog-form"
      width="600px"
      :title="'修改商品信息 序号'+id"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="form" ref="form" :rules="rules" :label-width="formLabelWidth">
        <el-form-item label="数量：" prop="number" required>
          <el-input v-model.number="form.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="成交价：" prop="finalPrice" required>
          <el-input v-model.number="form.finalPrice" autocomplete="off"></el-input>&nbsp;元
          <span class="warning-text">（折扣后价格）</span>
        </el-form-item>
        <el-form-item label="挂网价：" prop="initialPrice" required>
          <el-input v-model.number="form.initialPrice" autocomplete="off"></el-input>&nbsp;元
          <span class="warning-text">（销售价）</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableList from '@/components/public/TableList.vue'
export default {
  name: 'OSSFilingDetail',
  components: { TableList },
  data() {
    return {
      loading: false, //loading 效果
      tableData: [
        {
          id: 1,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        },
        {
          id: 2,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        },
        {
          id: 3,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        },
        {
          id: 4,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        },
        {
          id: 5,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        },
        {
          id: 6,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        },
        {
          id: 7,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        },
        {
          id: 8,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        },
        {
          id: 9,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        },
        {
          id: 10,
          category: '笔记本电脑', //类目
          brand: '微软', //品牌
          productName:
            '微软 EUS-00036 Laptop 13.3英寸笔记本电脑L13.3英寸笔记本电脑L13.3英寸笔记本电脑L', //商品名称
          marking: ' EUS-00036', //型号
          unit: '台', //单位
          count: '1', //数量
          weight: '1', //重量
          discountPrice: '4234.50', //成交价
          salesPrice: '4550.00', //销售价
          specs: 'Lpt i5 8 128  win10专业版', //参数规格
          packingList: '笔记本X1 充电器X1 鼠标X1', //包装清单
          economy: '24期8605页，证书号：CQC17701183061', //节能证书
          protection: '24期8605页，证书号：CQC17701183061', //环保证书
          productInfo: [
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' },
            { link: 'https://item.jd.com/6016586.html' }
          ],
          placeOrigin: '广东珠海',
          company: '北京某某某有限公司',
          images: [
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg',
            'https://file.tlwok.com/group1/M00/06/65/CgsVD11mR9qAFphsAAHzriWCxZM472.jpg'
          ]
        }
      ],
      dialogFormVisible: false,
      form: {
        number: '',
        finalPrice: '',
        initialPrice: ''
      },
      formLabelWidth: '120px',
      rules: {
        number: [
          { required: true, message: '请输入数量', trigger: 'blur' },
          {
            type: 'number',
            min: 0,
            message: '请输入正确的数量',
            trigger: 'blur'
          }
        ],
        finalPrice: [
          { required: true, message: '请输入成交价', trigger: 'blur' },
          {
            type: 'number',
            min: 0,
            message: '请输入正确的成交价',
            trigger: 'blur'
          }
        ],
        initialPrice: [
          { required: true, message: '请输入挂网价', trigger: 'blur' },
          {
            type: 'number',
            min: 0,
            message: '请输入正确的挂网价',
            trigger: 'blur'
          }
        ]
      },
      id: null
    }
  },
  created() {},
  methods: {
    reloadPage() {
      location.reload()
    },
    closePage() {
      this.$router.go(-1)
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.dialogFormVisible = false
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    editBtn(id) {
      this.dialogFormVisible = true
      this.id = id
    }
  }
}
</script>

<style lang="less" scoped>
@themeColor:#298DF8;
.page-header {
  background: #eee;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  .box {
    margin: auto;
    width: 1440px;
    height: 65px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 38px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
    span {
      width: 0;
      height: 20px;
      border: 2px solid @themeColor;
      background: @themeColor;
      margin-right: 14px;
    }
  }
}
.page-content {
  background: #fff;
  padding-top: 65px;
}
.info-box {
  margin: 30px auto;
  width: 60%;
}
.table-box,
.btn-box {
  width: 1078px;
  margin: 20px auto;
}
.table-title {
  border: 1px solid #bbb;
  padding: 0 25px;
  height: 45px;
  display: flex;
  align-items: center;
  background: #e4e4e4;

  .title {
    font-weight: bold;
    margin-right: 50px;
  }
}
.info-item {
  border: 1px solid #bbb;
  border-top: 0;
  .thead {
    background: #f5f5f5;
    padding: 0 25px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    .info {
      margin-right: 100px;
    }
  }
}
.base-info {
  .tbody {
    border-top: 1px solid #bbb;
    padding: 25px;
  }
  .content {
    width: 85%;
    margin: 0 auto;
  }
  .line-item {
    display: flex;
    align-items: flex-start;
    .el-row {
      flex: 1;
      margin-bottom: 12px;
      line-height: 28px;
      &:first-child {
        margin-right: 50px;
      }
    }
  }
}
.btn-box {
  text-align: right;
  .el-button {
    width: 98px;
  }
}
.dialog-form {
  .el-input {
    width: 250px;
    margin: auto;
  }
  .warning-text {
    margin-left: 10px;
    font-size: 13px;
  }
}
</style>
